<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .box {
      width: 200px;
      height: 200px;
      border: 2px solid red;
      margin: 150px 150px;
      position: relative;
      /* 视距 */
      perspective: 300px;
      /* 设置元素的子元素是位于 3D 空间中  */
      /* transform-style: preserve-3d; */
    }

    .item {
      width: 200px;
      height: 200px;
      /* 定位元素 */
      position: absolute;
      left: 0;
      top: 0;
    }

    .flat {
      /* 设置元素的子元素是位于 2D 空间中  */
      transform-style: flat;
    }
    .preserve-3d {
      /* 设置元素的子元素是位于 3D 空间中  */
      transform-style: preserve-3d;
    }

    .rotatex60deg {
      background-color: khaki;
      /* x轴正方向顺转60deg */
      transform: rotateX(60deg);
    }
    .rotatey60deg {
      background-color: skyblue;
      /* y轴正方向顺转 60deg */
      transform: rotateY(60deg);
    }
  </style>

  <!-- 子元素位于 2D 平面中 -->
  <div class="box flat">
    <div class="item rotatex60deg"></div>
    <div class="item rotatey60deg"></div>
  </div>
  <!-- 子元素位于 3D 平面中 -->
  <div class="box preserve-3d">
    <div class="item rotatex60deg"></div>
    <div class="item rotatey60deg"></div>
  </div>
</html>
